<template>
	<div class="doc_pc_components_VirtualScrollArea">
		<VirtualScrollArea
			v-slot="{item,index}"
			:data="list"
			visible
			class="doc-VirtualScrollArea"
		>
			<div :key="index">{{item}}--index:{{index}}</div>
		</VirtualScrollArea>
		<VirtualScrollArea
			v-slot="{item,index}"
			:data="list"
			direction="x"
			visible
			class="doc-VirtualScrollArea2"
		>
			<div
				:key="index"
				style="width:110px;text-align:center"
			>
				<div
					v-for="(val,key) in item"
					:key="key"
				>{{key}}: {{val}}</div>
				<div>index: {{index}}</div>
			</div>
		</VirtualScrollArea>
	</div>
</template>

<script setup>
import {VirtualScrollArea} from 'powerful-ui/pc-default';

const list=[];
for(let i=0;i<5e4;++i){
	list.push({
		id:i,
	});
}
</script>

<style lang="scss">
.doc_pc_components_VirtualScrollArea{
	.doc-VirtualScrollArea{
		margin:20px;
		width:250px;
		height:300px;
	}
	.doc-VirtualScrollArea2{
		height:100px;
		width:400px;
		margin-left:20px;
	}
}
</style>